<template>
  <div class="app-container">
    <span style="font-size: medium;font-weight: 700;color: red;font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;margin-left: 8px"> 标有红色图标的成品缺货,请及时补货；标有黄色图标的成品配件充足但请及时安排制作成品！！！</span>
    <br>
    <br>
    <el-input v-model="search" placeholder="输入编号或者名称关键字搜索" size="mini" align="right"/>
    <el-table
      v-loading="listLoading"
      :data="data.filter(data => !search || data.Name.toLowerCase().includes(search.toLowerCase()) || data.No.toLowerCase().includes(search.toLowerCase()))"
      element-loading-text="Loading"
      style="width: 100%"
    >
      <el-table-column type="expand" class-name="column-background">
        <template slot-scope="props">
          <el-form label-position="left" inline class="table-expand">
            <el-form-item label="颜色">
              <span>{{ props.row.Colour }}</span>
            </el-form-item>
            <el-form-item label="安全存量">
              <span>{{ props.row.MerchandiseSafetyStock }}</span>
            </el-form-item>
            <el-form-item label="目标销量">
              <span>{{ props.row.PresaleNumber }}</span>
            </el-form-item>
            <el-form-item label="销量">
              <span>{{ props.row.SalesVolume }}</span>
            </el-form-item>
            <el-form-item label="尺寸">
              <span>{{ props.row.Size }}</span>
            </el-form-item>
            <el-form-item label="单个进价(元)">
              <span>{{ props.row.PurchasePrice }}</span>
            </el-form-item>
            <el-form-item label="单个重量(g)">
              <span>{{ props.row.Weight }}</span>
            </el-form-item>
            <el-form-item label="件/毛重(kg)">
              <span>{{ props.row.PackgeWeight }}</span>
            </el-form-item>
            <el-form-item label="装箱数">
              <span>{{ props.row.PackgeNum }}</span>
            </el-form-item>
            <el-form-item label="整件箱规">
              <span>{{ props.row.PackgeCube }}</span>
            </el-form-item>
            <el-form-item label="供应商">
              <span>{{ props.row.Supply }}</span>
            </el-form-item>
            <el-form-item label="位置">
              <span>{{ props.row.Location }}</span>
            </el-form-item>
            <el-form-item label="原装标签">
              <span>{{ props.row.Logo }}</span>
            </el-form-item>
            <el-form-item label="备注">
              <span>{{ props.row.Remark }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column
        :filters="[{ text: '有货', value: false }, { text: '缺货', value: true }]"
        :filter-method="filterTag"
        label="编号(右侧下拉筛选有货没货)"
        prop="ID"
      >
        <template slot-scope="props">
          <span>{{ props.row.No }}</span>
          <el-button
            v-if="props.row.isShortage"
            type="danger"
            icon="el-icon-warning"
            size="small"
            circle
          />
          <el-button
            v-if="props.row.CollectNum > 0"
            type="warning"
            icon="el-icon-warning"
            size="small"
            circle
          />
        </template>
      </el-table-column>
      <!--      <el-table-column label="类型" prop="Type"/>-->
      <el-table-column label="名称" prop="Name"/>
      <el-table-column label="库存" prop="Number"/>
    </el-table>
  </div>
</template>

<style>
  .column-background {
  background-color: gainsboro;
  }
  .table-expand {
    font-size: 0;
  }
  .table-expand label {
    width: 150px;
    color: #99a9bf;
  }
  .table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>

<script>
import { getCommoditiesStock } from '@/api/commodity'

export default {
  data() {
    return {
      listLoading: true,
      data: [],
      search: ''
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.listLoading = true
      getCommoditiesStock().then(response => {
        console.log(response)
        this.data = response
        this.listLoading = false
        const len = response.length

        // let isShortage = false
        for (let i = 0; i < len; i++) {
          if (response[i].Shortage) { // 库存 // 配件的库存告警要根据成品的安全库存来，如果配件组合成的成品数量加上本来成品的库存少于成品的安全库存，那么成品不仅要告警了，配件也要告警了
            this.data[i].isShortage = true
            // isShortage = true
          } else {
            this.data[i].isShortage = false
          }
        }
        // if (isShortage) {
        //   this.$notify({
        //     title: '缺货提示',
        //     message: '标有 红色图标 的成品缺货，请及时补货；标有 黄色图标 的成品，请及时安排制作成品',
        //     duration: 15000,
        //     type: 'danger',
        //     iconClass: 'el-icon-warning'
        //   })
        // }
      })
    },
    filterTag(value, row) {
      return row.isShortage === value
    }
  }
}
</script>
